<template>
  <div class="refine_onekey">
    <h2 class="titleblue">一键派发</h2>
    <div class="container">
      <el-row :gutter="10" class="plan-num">
        <el-col :span='4'>
          <span>{{choose?'勾选的任务总量':'总任务数量'}} </span>
          <label>{{amount}}</label>
        </el-col>
        <el-col :span='5'>
          <span>当前已选择任务数量 </span>
          <label>{{num}}</label>
        </el-col>
      </el-row>
      <el-form :inline="true" ref="form" :model="form" label-width="70px">
        <el-row :gutter="10" class="checkgroup chcgroup">
          <el-form-item label="任务分配">
            <!-- <el-col :span="12" v-for="(item,index) in unit" :key='index'>
                <el-checkbox :label="item.name" name="tpallot" v-model='item.choose' @change="changeDis"></el-checkbox>
                <el-input v-model="item.num" @change="changeDis"></el-input>
            </el-col> -->
            <el-col :span="6"  class="task-tree">
              <div class="grid-content">
                <el-tree :data="data2" show-checkbox accordion node-key="id" ref="tree" highlight-current
                         :props="defaultProps" :check-strictly="true" @check="handleCheckChange">
                </el-tree>
              </div>

            </el-col>
            <el-col :span="18" class="">
              <div class="grid-content tree-cont">
                <el-row >
                  <el-col :span="8" v-for="(item,index) in treeList" :key='index'>
                    <span>{{item.name}}</span><el-input v-model='item.num' @change="changeDis(index)"></el-input>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="10" class="checkgroup">
          <el-form-item label="抄送">
            <el-col :span="24">
              <el-col :span="4" v-if="leaderlist.length!=0">
                <div class="grid-content groupli copylist">
                  <!-- <div v-for="(item,index) in leaderlist" :key='index'>
                      <el-checkbox :label="item.name" name="tpallot" v-model='item.choose' @change='chooseLeader'></el-checkbox>
                  </div> -->
                  <el-checkbox v-model="checkLeader" @change="leaderAll" class="allchck">全选</el-checkbox>

                  <!-- <el-checkbox-group v-model="checkedLeader" @change="leaderAllChange">
                          <el-checkbox v-for="(item,index) in leaderlist" :label="item.id" :key="index">{{item.name}}</el-checkbox>
                      </el-checkbox-group> -->
                  <el-tree :data="leaderlist" show-checkbox accordion node-key="id" ref="treeLeader" highlight-current
                           :props="defaultProps" @check="leaderChange">
                  </el-tree>
                </div>
              </el-col>
              <el-col :span="4" v-if="dows.length!=0">
                <div class="grid-content groupli copylist">
                  <p>业务部门</p>
                  <el-checkbox v-model="checkDow" @change="dowAll" class="allchck">全选</el-checkbox>
                  <!-- <el-checkbox-group v-model="checkedDow" @change="dowAllChange">
                      <el-checkbox v-for="(dow,index) in dows" :label="dow.id" :key="index">{{dow.name}}</el-checkbox>
                  </el-checkbox-group> -->
                  <el-tree :data="dows" show-checkbox accordion node-key="id" ref="treeDows" highlight-current
                           :props="defaultProps" @check="dowsChange">
                  </el-tree>
                </div>
              </el-col>
              <el-col :span="4" v-if="laws.length!=0">
                <div class="grid-content groupli copylist">
                  <p>行政部门</p>

                  <el-checkbox v-model="checkLaw" @change="lawAll" class="allchck">全选</el-checkbox>
                  <!-- <el-checkbox-group v-model="checkedLaw" @change="lawAllChange">
                      <el-checkbox v-for="(law,index) in laws" :label="law.id" :key="index">{{law.name}}</el-checkbox>
                  </el-checkbox-group> -->
                  <el-tree :data="laws" show-checkbox accordion node-key="id" ref="treelaws" highlight-current
                           :props="defaultProps" @check="lawsChange">
                  </el-tree>
                </div>
              </el-col>
              <el-col :span="4" v-if="egs.length!=0">
                <div class="grid-content groupli copylist">
                  <p>海事处</p>
                  <el-checkbox v-model="checkEg" @change="egAll" class="allchck">全选</el-checkbox>
                  <!-- <el-checkbox-group v-model="checkedEg" @change="egAllChange">
                      <el-checkbox v-for="(eg,index) in egs" :label="eg.id" :key="index">{{eg.name}}</el-checkbox>
                  </el-checkbox-group> -->
                  <el-tree :data="egs" show-checkbox accordion node-key="id" ref="treeEgs" highlight-current
                           :props="defaultProps" @check="egsChange">
                  </el-tree>
                </div>
              </el-col>
              <el-col :span="4" v-if="dutys.length!=0">
                <div class="grid-content groupli copylist">
                  <p>执法大队</p>
                  <el-checkbox v-model="checkDuty" @change="dutyAll" class="allchck">全选</el-checkbox>
                  <!-- <el-checkbox-group v-model="checkedDuty" @change="dutyAllChange">
                      <el-checkbox v-for="(duty,index) in dutys" :label="duty.id" :key="index">{{duty.name}}</el-checkbox>
                  </el-checkbox-group> -->
                  <el-tree :data="dutys" show-checkbox accordion node-key="id" ref="treeDutys" highlight-current
                           :props="defaultProps" @check="dutyChange">
                  </el-tree>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content groupli copylist">
                  <div>自定义抄送
                    <div class="copybtn fr" @click="cusClick">自定义</div>
                  </div>
                  <el-checkbox v-model="checkCustomize" @change="customizeAll" class="allchck">全选</el-checkbox>
                  <!-- <el-tree :data="customize" show-checkbox node-key="id" ref="treeCustomize" highlight-current :props="defaultProps" @check="customizeChange"> -->
                  <el-tree :data="customize" show-checkbox node-key="id" ref="treeCustomize" @check="customizeChange" highlight-current
                           :props="defaultProps">
                  </el-tree>
                </div>
              </el-col>
              <el-col :span="4" style="padding-right:0px !important">
                <div class="grid-content groupli copylist">
                  <p>抄送人数共计{{copylistP.length}}人</p>
                  <ul v-for="(item,index) in copylistP" :key='index'>
                    <li>{{item}}</li>
                  </ul>
                </div>
              </el-col>
            </el-col>
            <!-- <el-col :span="8" v-for="(item,index) in copylist" :key='index'>
                <el-checkbox :label="item.name" name="tpallot" v-model='item.choose'></el-checkbox>
            </el-col> -->
          </el-form-item>
        </el-row>
        <el-row :gutter="24" style="text-align: center;">
          <el-form-item>
            <el-button type="primary" @click="creatsure" class="sure">派发</el-button>
            <el-button class="cancel" @click="creatcancel">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <el-dialog title="" :visible.sync="successDialog" width="30%" center append-to-body class="successDialog">
      <p style="text-align: center;">您成功对本次任务进行了派发</p>
      <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="closebtn" class="successbtn">关闭 {{timer}}s</el-button>
        </span>
    </el-dialog>
    <el-dialog title="" :visible.sync="dialogVisible" width="80%" append-to-body class="copyGroup">
        <span>
            <h2 class="titleblue">创建抄送组</h2>
            <div class="contant">
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
                    <el-row :gutter="24">
                        <el-form-item label="群组名称" prop="name" class="group-name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row :gutter="24">
                        <el-form-item label="添加群成员">
                            <data-tree title="抄送组" ref="outlan" :groupData="groupData"></data-tree>
                        </el-form-item>
                    </el-row>
                    <el-row :gutter="24">
                        <el-form-item class="footerbtn">
                            <el-button type="primary" @click="copysure" class="sure">添加</el-button>
                            <el-button class="cancel" @click="copycancel">取消</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>

            </div>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import DataTree from "@/components/common/DataTree.vue"
  export default {
    components: {
      'data-tree': DataTree
    },
    data: function () {
      return {
        successDialog: false,
        timer: 3,
        form: {},
        amount: 20,
        unit: [],
        num: 0,
        copylist: [],
        copylistP: [],
        leaderlist: [],
        dows: [],
        laws: [],
        egs: [],
        dutys: [],
        checkLeader: false,
        checkedLeader: [],
        checkBroat: false,
        checkedBroat: [],
        checkDuty: false,
        checkedDuty: [],
        checkEg: false,
        checkedEg: [],
        checkLaw: false,
        checkedLaw: [],
        checkedDow: [],
        checkDow: false,
        checkedCities: '',
        isIndeterminate: true,
        choose: false,
        treeList: [],
        sending: false,
        dataLeader: [],

        customize: [],
        checkCustomize: false,
        checkedCustomize: [],
        customizelength: '',
        dialogVisible: false,

        groupData: [],
        ruleForm: {
          name: '',

        },
        aa: [],
        cusChil: [],
        checkAll: false,

        data2: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    watch: {
      unit: {
        handler(newValue, oldValue) {
          var tsnum = 0;
          for (let key of newValue) {
            if (key.choose == true) {
              tsnum += parseFloat(key.num);
            }
          }
          this.num = tsnum;
        },
        deep: true
      }
    },
    created() {
      if (this.$route.query.choose) {
        this.choose = true
        this.amount = this.$route.query.choose.split(',').length
      } else {
        this.choose = false
        this.amount = this.$route.query.all;
      }

      this.$axios.get(this.$config["taskDistribute"], { params: { skey: localStorage.getItem('auth') } }).then((res) => {
        for (var i of res.data.content) {
          this.unit.push({
            id: i.d_id,
            name: i.name,
            choose: false,
            num: 10
          })
        }

      });
      this.$axios.get(this.$config["copyTask"], { params: { skey: localStorage.getItem('auth') } }).then((res) => {
        var data = res.data.content;
        if (data.leader) {
          for (var key of data.leader) {
            var children = []
            if (key.person) {
              for (var child of key.person) {
                children.push({
                  label: child.fullname,
                  id: "1-" + child.d_id
                })
              }
            }

            this.leaderlist.push({
              id: "0-" + key.d_id,
              label: key.name,
              children: children
            });

          }
        }
        if (data.business) {
          for (var i of data.business) {
            var children = []
            if (i.person) {
              for (var child of i.person) {
                children.push({
                  label: child.fullname,
                  id: "1-" + child.d_id
                })
              }
            }

            this.dows.push({
              id: "0-" + i.d_id,
              label: i.name,
              children: children
            });

          }
        }
        if (data.poliList) {
          for (var j of data.poliList) {
            var children = []
            if (j.person) {
              for (var child of j.person) {
                children.push({
                  label: child.fullname,
                  id: "1-" + child.d_id
                })
              }
            }
            this.laws.push({
              id: "0-" + j.d_id,
              label: j.name,
              children: children
            });
          }
        }
        if (data.sea) {
          for (var x of data.sea) {
            var children = []
            if (x.person) {
              for (var child of x.person) {
                children.push({
                  label: child.fullname,
                  id: "1-" + child.d_id
                })
              }
            }
            this.egs.push({
              id: "0-" + x.d_id,
              label: x.name,
              children: children
            });
          }

        }
        if (data.son) {
          for (var x of data.son) {
            var children = []
            if (x.person) {
              for (var child of x.person) {
                children.push({
                  label: child.fullname,
                  id: "1-" + child.d_id
                })
              }
            }
            this.dutys.push({
              id: "0-" + x.d_id,
              label: x.name,
              children: children
            });
          }
        }

        // for (var key of data) {
        //     this.copylist.push({
        //         d_id: key.d_id,
        //         name: key.name,
        //         choose: false
        //     });
        // }
      })
      this.getTree();
      this.groupData1();
      this.getCopy();
    },
    methods: {
      getCopy() {
        this.$axios.get(this.$config["copyTask"], {
          params: {
            skey: localStorage.getItem('auth')
          }
        }).then((res) => {
          var data = res.data.content;
          if (data.userGroup) {
            var cusperson = []
            for (var x of data.userGroup) {
              var children = []
              if (x.person) {
                for (var child of x.person) {
                  children.push({
                    label: child.fullname,
                    id: "1-" + child.d_id
                  })
                  cusperson.push({
                    label: child.fullname,
                    id: "1-" + child.d_id
                  })

                }
              }
              this.customize.push({
                id: "0-" + x.d_id,
                label: x.group_name,
                children: children
              });



              this.customizelength = parseInt(this.customize.length + cusperson.length)

            }
          }
        })
      },
      creatsure() {
        if (this.sending) {
          this.$alert('正在派发中，请不要重复派发')
          return false;
        }
        if (this.choose && this.num != this.amount) {
          this.$alert("请选择与勾选数量相等的派发数量")
          return false;
        }
        if (this.num == 0) {

          this.$alert("请填写需要派发的任务数量")
          return false;
        }
        this.sending = true;
        var childlist = []
        for (var i of this.treeList) {
          var level = i.id.split('-')
          if (level[0] == 0 && i.num != '0') {
            childlist.push({ org_id: level[1], dept_id: '', unitPeople: [{ 'person': '', 'orgNum': i.num }] })
          } else if (level[0] == 1 && i.num != '0') {
            childlist.push({ org_id: '', dept_id: level[1], unitPeople: [{ 'person': '', 'orgNum': i.num }] })
          } else if (level[0] == 2 && i.num != '0') {
            childlist.push({ org_id: '', dept_id: '', unitPeople: [{ 'person': level[1], 'orgNum': i.num }] })
          }
        }
        var copycopy = []
        for (let i of this.copylist) {
          var level = i.id.split('-')
          if (level[0] == 0) {
            copycopy.push({ org_id: level[1], userId: '' });
          } else {
            copycopy.push({ userId: level[1], org_id: '' });
          }


        }
        // var org666=[]
        // var person666=[]
        // for (let i of this.copylist) {
        //    var level =i.id.split('-')
        //     if(level[0]==0){
        //          org666.push(level[1]);
        //     }else{
        //         person666.push(level[1]);
        //     }


        // }
        // copycopy={org:org666,userId:person666}
        if (this.choose) {
          var params = {
            skey: localStorage.getItem('auth'),
            childList: JSON.stringify(childlist),
            copyList: JSON.stringify(copycopy),
            taskIdNum: this.$route.query.choose
          }

        } else {
          var params = {
            skey: localStorage.getItem('auth'),
            childList: JSON.stringify(childlist),
            copyList: JSON.stringify(copycopy),
          }
        }
        this.$axios.get(this.$config["distributeTask"], {
          params: params
        }).then((res) => {
          this.sending = false;
          if (res.data.errno == '100100') {

            this.successDialog = true;
            this.timeinterval = setInterval(() => {
              this.timer--
            }, 1000);
            this.timeout = setTimeout(() => {
              clearInterval(this.timeinterval);
              this.creatcancel();
              this.timer = 3;
            }, 2900);



          } else {

            this.$alert(res.data.errmsg)
          }
        });
      },
      creatcancel() {
        this.$emit("close");
        // this.$router.push("/index/task/daytask");
      },
      closebtn() {
        this.successDialog = false;
        this.creatcancel();
        clearInterval(this.timeinterval)
        clearTimeout(this.timeout);
        this.timer = 3;
        // this.amount=''
      },
      changeDis(index) {
        this.num = 0;

        if (!this.treeList[index].num) {
          this.treeList[index].num = 0
        }
        for (var key of this.treeList) {

          this.num += parseFloat(key.num);

        }
      },
      makeCopy() {
        this.copylistP = []

        this.copylist = this.checkedLeader.concat(this.checkedDow, this.checkedLaw, this.checkedDuty, this.checkedEg)
        var arr = this.leaderlist.concat(this.dows, this.laws, this.dutys, this.egs)
        for (var i of this.copylist) {
          for (var j of arr) {
            if (j.id == i.id) {
              this.copylistP.push(j.label)
              break;
            } else if (j.children) {
              for (var k of j.children) {
                if (k.id == i.id) {
                  this.copylistP.push(k.label)
                  break;
                }
              }
            }
          }
        }

      },
      //全选
      leaderAll(val) {
        if (val) {
          this.$refs.treeLeader.setCheckedNodes(this.leaderlist)
          this.checkedLeader = this.$refs.treeLeader.getCheckedNodes()
        } else {
          this.$refs.treeLeader.setCheckedNodes([])
          this.checkedLeader = []
        }
        // var arr = []
        // for (var i of this.leaderlist) {
        //     arr.push(i.id)
        // }
        // this.checkedLeader = val ? arr : [];

        this.makeCopy()
      },
      leaderAllChange(value) {
        let checkedLeader = value.length;
        this.checkLeader = checkedLeader === this.leaderlist.length;
        this.makeCopy()
      },
      dowAll(val) {
        if (val) {
          this.$refs.treeDows.setCheckedNodes(this.dows)
          this.checkedDow = this.$refs.treeDows.getCheckedNodes()
        } else {
          this.$refs.treeDows.setCheckedNodes([])
          this.checkedDow = []
        }
        // var arr = []
        // for (var i of this.dows) {
        //     arr.push(i.id)
        // }
        // this.checkedDow = val ? arr : [];
        this.makeCopy()
      },
      dowAllChange(value) {
        let checkedDow = value.length;
        this.checkDow = checkedDow === this.dows.length;
        this.makeCopy()
      },
      lawAll(val) {
        // var arr = []
        // for (var i of this.laws) {
        //     arr.push(i.id)
        // }
        // this.checkedLaw = val ? arr : [];
        // this.makeCopy()
        if (val) {
          this.$refs.treelaws.setCheckedNodes(this.laws)
          this.checkedLaw = this.$refs.treelaws.getCheckedNodes()
        } else {
          this.$refs.treelaws.setCheckedNodes([])
          this.checkedLaw = []
        }
        this.makeCopy()
      },
      lawAllChange(value) {
        let checkedLaw = value.length;
        this.checkLaw = checkedLaw === this.laws.length;
        this.makeCopy()
      },
      dutyAll(val) {
        // var arr = []
        // for (var i of this.dutys) {
        //     arr.push(i.id)
        // }
        // this.checkedDuty = val ? arr : [];
        // this.makeCopy()

        if (val) {
          this.$refs.treeDutys.setCheckedNodes(this.dutys)
          this.checkedDuty = this.$refs.treeDutys.getCheckedNodes()
        } else {
          this.$refs.treeDutys.setCheckedNodes([])
          this.checkedDuty = []
        }
        this.makeCopy()
      },
      dutyAllChange(value) {
        let checkedDuty = value.length;
        this.checkDuty = checkedDuty === this.dutys.length;
        this.makeCopy()
      },
      egAll(val) {
        // var arr = []
        // for (var i of this.egs) {
        //     arr.push(i.id)
        // }
        // this.checkedEg = val ? arr : [];
        // this.makeCopy()
        if (val) {
          this.$refs.treeEgs.setCheckedNodes(this.egs)
          this.checkedEg = this.$refs.treeEgs.getCheckedNodes()
        } else {
          this.$refs.treeEgs.setCheckedNodes([])
          this.checkedEg = []
        }
        this.makeCopy()
      },
      egAllChange(value) {
        let checkedEg = value.length;
        this.checkEg = checkedEg === this.egs.length;
        this.makeCopy()
      },
      customizeAll(val) {

        if (val) {
          this.$refs.treeCustomize.setCheckedNodes(this.customize)
          this.checkedCustomize = this.$refs.treeCustomize.getCheckedNodes()
        } else {
          this.$refs.treeCustomize.setCheckedNodes([]);
          this.checkedCustomize = []

        }
        this.copylistP = []

        this.cusChil = []
        for (var i of this.checkedCustomize) {
          if (!i.children) {
            this.cusChil.push(i)
          }
        }

        for (var i of this.cusChil) {
          for (var j of this.checkedCustomize) {
            if (j.id == i.id) {
              this.copylistP.push(j.label)
              this.copylistP = Array.from(new Set(this.copylistP))
              break;
            } else if (j.children) {
              for (var k of j.children) {
                if (j.id == i.id) {
                  this.copylistP.push(j.label)
                  this.copylistP = Array.from(new Set(this.copylistP))
                  break;
                }
              }
            }
          }
        }
        // this.makeCopy()
      },
      customizeAllChange(value) {
        let checkedCustomize = value.length;
        this.checkCustomize = checkedCustomize === this.customize.length;
        // this.makeCopy()
      },
      handleCheckChange(data, checked, indeterminate) {
        this.num = 0
        this.treeList = []
        var arr = checked.checkedNodes
        for (var i of arr) {
          this.treeList.push({
            name: i.label,
            id: i.id,
            num: 0
          })
        }
      },
      getTree() {
        this.data2 = []
        this.$axios.get(this.$config['oneKeyMan'], { params: { skey: localStorage.getItem('auth') } }).then((res) => {
          var level = localStorage.getItem('ulevel')
          var business = localStorage.getItem('businessOrg')
          if (business == 1) {
            level = 2
          }
          for (var i of res.data.content) {
            if (i.business_org) {
              if (i.business_org == 1) {
                level = 1
              } else {
                level = localStorage.getItem('ulevel')
              }
            }

            if (i.zfUser) {
              i.child = []
              for (var j of i.zfUser) {
                if (j.zfUser) {
                  j.child = []
                  for (var k of j.zfUser) {
                    j.child.push({
                      label: k.name || k.fullname,
                      id: Number(level) + 2 + "-" + k.d_id,
                    })
                  }
                }
                i.child.push({
                  label: j.name || j.fullname,
                  id: Number(level) + 1 + "-" + j.d_id,
                  children: j.child
                })
              }
            }
            if (i.business_org && i.business_org == 1) {
              level = 0
            }
            this.data2.push({
              label: i.name || i.fullname,
              id: level + '-' + i.d_id,
              children: i.child
            })
          }
        })
      },
      leaderChange(val, node) {
        this.checkedLeader = node.checkedNodes
        this.makeCopy()

      },
      dowsChange(val, node) {
        this.checkedDow = node.checkedNodes
        this.makeCopy()
      },
      lawsChange(val, node) {
        this.checkedLaw = node.checkedNodes
        this.makeCopy()
      },
      egsChange(val, node) {
        this.checkedEg = node.checkedNodes
        this.makeCopy()
      },
      dutyChange(val, node) {
        this.checkedDuty = node.checkedNodes
        this.makeCopy()
      },
      customizeChange(val, node) {
        // this.checkedCustomize = node.checkedNodes
        this.copylistP = []
        this.checkedCustomize = node.checkedNodes

        this.cusChil = []
        for (var i of this.checkedCustomize) {
          if (!i.children) {
            this.cusChil.push(i)
          }
        }

        for (var i of this.cusChil) {
          for (var j of this.checkedCustomize) {
            if (j.id == i.id) {
              this.copylistP.push(j.label)
              this.copylistP = Array.from(new Set(this.copylistP))
              break;
            } else if (j.children) {
              for (var k of j.children) {
                if (j.id == i.id) {
                  this.copylistP.push(j.label)
                  this.copylistP = Array.from(new Set(this.copylistP))
                  break;
                }
              }
            }
          }
        }
      },
      //自定义抄送
      cusClick() {
        this.dialogVisible = true
      },
      //自定义群组
      groupData1() {
        var arr = []
        this.$axios.get("OrganizationSelectAllUserByOrg", {
          params: {
            'skey': localStorage.getItem('auth')
          }

        }).then((res) => {
          arr.push({
            d_id: 1,
            name: "全部",
            users: res.data.content.userAll
          })
        }).then(() => {
          this.$axios.get("OrganizationSelectAllUserByOrg", {
            params: {
              'skey': localStorage.getItem('auth')
            }

          }).then((res) => {
            this.groupData = arr.concat(res.data.content.userOrg)
          });
        });
      },
      copysure() {
        if (this.ruleForm.name.length == 0) {
          this.$alert('请填写群组名称');
          return false;
        }
        this.ruleForm.skey = localStorage.getItem('auth');
        var arr = []
        for (var i of this.$refs.outlan.members) {
          arr.push(i.d_id)
        }
        this.ruleForm.idStr = arr.join(",")
        this.$axios.get("GroupMessageAddGroupMessage", {
          params: this.ruleForm

        }).then((res) => {
          this.$alert('添加成功', {
            callback: action => {
              this.dialogVisible = false;
              this.clearCopy();
              this.getCopy();
              this.customize = [];
            }
          });
        });
      },
      copycancel() {
        this.dialogVisible = false
      },
      clearCopy() {
        this.ruleForm.name = '';
        this.ruleForm.idStr = [];
        this.$refs.treeCustomize.setCheckedKeys([]);

      },

    }
  };
</script>

<style lang="scss">
  .refine_onekey {
    .checkgroup {
      .el-checkbox{
        float: left;
        margin-left:0px;
      }
      .el-checkbox__input {
        display: inline-block;
      }
      .el-checkbox__label {
        display: inline-block;
        max-width: 90%;
        vertical-align: -4px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left:5px;
      }

      .el-form-item__content {
        width: 90%;
        box-sizing: border-box;
        border: none;
        padding: 0;
      }
      .el-col{
        padding-left:0px !important;
        padding-right:10px !important
      }
      .groupli{
        border:1px solid #ddd;
        height:400px;
        padding-left: 4px !important;
        padding-right:0px !important;

        P{
          font-size:14px;
          line-height: 30px;
        }
        li{
          line-height: 30px;
          border-bottom:1px solid #ddd;
        }
        .el-tree-node__content>.el-tree-node__expand-icon{
          padding:0px;
        }
        .el-tree-node{
          width:100%;
          float: left;
          display: inline-table;
        }
      }
      .copylist{
        overflow-y:auto;
      }


    }
    .task-tree{
      border:1px solid #ddd;
      padding:10px 0px;
      height:300px;
      overflow-y: auto;

      label{
        width:auto !important;

      }
      .el-checkbox{
        width:auto !important;
        height: auto;
      }
    }
    .tree-cont{
      border:1px solid #ddd;
      padding:10px;
      box-sizing: border-box;
      min-height:300px;
      overflow-y: auto;
      margin-left:10px;

      .el-row{
        margin-top:0px;
      }

      .el-input{
        width:60px;
        height:30px;
        margin-left:5px;

        input{
          height:30px;
          text-align: center;
          width:50px;
          line-height:24px;
        }
      }
    }

    .chcgroup  .el-form-item__content {
      .el-col{
        padding-left:5px !important;
        padding-right:5px !important
      }
      .el-checkbox{
        width:auto;
      }
    }
    .container{
      padding:0px 30px;
      box-sizing: border-box;
    }
    .el-button{
      width: 100px;
      height: 34px;
      border-radius: 4px;
      border: solid 1px #0062cd;
      font-size: 14px;
      color: #0062cd;
      line-height: 34px;
      padding:0;
    }
    .active{
      background-color: #0062cd;
      color:#fff;
    }
    .el-row{
      margin-top:30px;
      margin-left:0 !important;
      margin-right:0 !important;
    }
    .plan-num{
      font-size: 14px;
      color: #666666;
    }
    .plan-num label{
      color: #0062cd;
    }

    .checkgroup .el-form-item{
      width:100%;
    }
    .checkgroup .el-form-item .el-input{
      width:40px;
      box-sizing: border-box;
      height:24px;
      margin-left:9px;
      .el-input__inner{
        padding: 0px;
      }

    }

    .checkgroup .el-form-item input{
      height:24px;
      font-size:12px;
      text-align: center;
    }
    .successDialog p{
      text-align: center;
    }
    .successDialog .successbtn{
      width: 170px;
      height: 40px;
      background-color: #0062cd;
      border-radius: 4px;
      font-size: 16px;
      color: #ffffff;
    }
    .copybtn{
      width: 50px;
      height: 20px;
      background-color: #0062cd;
      border-radius: 4px;
      font-size: 12px;
      color: #ffffff;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
      margin-top: 10px;
      margin-right:2px;
    }
    .el-tree__empty-block{
      margin-top:30px;
    }
  }
</style>
